<style lang="scss">
  .exercise-1{
    .🎄{
      display:grid;
      grid-template-columns:repeat(15, 1fr);
      grid-template-areas:
        ". . . . . . ........ l1  ....... . . . . . ."
        ". . . . . . ........ l1  ....... . . . . . ."
        ". . . . . ....... l2 l2 l2 ....... . . . . ."
        ". . . . . ....... l2 l2 l2 ....... . . . . ."
        ". . . . ...... l3 l3 l3 l3 l3 ...... . . . ."
        ". . . . ...... l3 l3 l3 l3 l3 ...... . . . ."
        ". . . ..... l4 l4 l4 l4 l4 l4 l4 ..... . . ."
        ". . . ..... l4 l4 l4 l4 l4 l4 l4 ..... . . ."
        ". . .... l5 l5 l5 l5 l5 l5 l5 l5 l5 .... . ."
        ". . .... l5 l5 l5 l5 l5 l5 l5 l5 l5 .... . ."
        ". ... l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 ... ."
        ". ... l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 l6 ... ."
        ".. l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 .."
        ".. l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 l7 .."
        "l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8"
        "l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8 l8"
        ". . . . . ....... l9 l9 l9 ....... . . . . ."
        ". . . . . ....... l9 l9 l9 ....... . . . . ."
        ". . . . . ....... l9 l9 l9 ....... . . . . .";

      grid-auto-rows:20px;
      grid-gap:2px;
      max-width:500px;
      margin:0 auto;
    }

    .🍃{
      --Green:#8FD694;
      --Greener:#7DBA84;
      --Wood:#894E35;
      border-radius:5px;
      background-color:var(--Green);
      &:first-child{
        background:linear-gradient(to top right,#A5932C,#F9E570);
      }
      &:last-child{
        background-color:var(--Wood);
      }
      &:nth-child(even){
        background-color:var(--Greener);
      }
    }
    @for $n from 1 through 9{
      .🍃:nth-child(#{$n}){
        grid-area:l + $n;
      }
    }
  }


</style>
<template>
  <div class="exercise-1">
    <div class="🎄">
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
      <div class="🍃"></div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        count: 0
      }
    },
    computed: {},
    methods: {},
    mounted() {
    }
  }
</script>
